<template>
  <main class="relative h-screen overflow-hidden bg-gray-100 rounded-2xl" data-theme="light">
    <div class="flex items-start justify-between">
      <div class="relative hidden h-screen my-4 ml-4 shadow-lg lg:block w-80">
        <div class="h-full bg-white rounded-2xl">
          <div class="flex items-center justify-center pt-6">
            <div class="flex">
              <h1 class="px-8 text-lg font-semibold">{{ localUserRef.role === '学生' ? '视力查询系统' : '视力管理系统' }}</h1>
            </div>
          </div>
          <nav class="mt-6 overflow-auto h-full">
            <a :class="item.current ?
              'flex items-center justify-start cursor-pointer w-full p-4 my-2 font-thin text-blue-500 uppercase transition-colors duration-200 border-r-4 border-blue-500 bg-gradient-to-r from-white to-blue-100'
              : 'flex items-center justify-start cursor-pointer w-full p-4 my-2 font-thin text-gray-500 uppercase transition-colors duration-200 hover:text-blue-500'"
               @click="toPage(item.href)" v-for="item in navigationRef">
                <span class="text-left">
                                <svg width="20" height="20" fill="currentColor" class="m-auto" viewBox="0 0 1024 1024"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path :d="item.svgPath"></path>
                                </svg>
                            </span>
              <span class="mx-4 text-sm font-normal">
                                {{item.name}}
                            </span>
            </a>
            <div class="h-80"></div>
          </nav>
        </div>
      </div>
      <div class="flex flex-col w-full pl-0 md:p-4 md:space-y-4">
        <header class="z-40 items-center w-full h-16 bg-white shadow-lg rounded-2xl">
          <div class="relative z-20 flex flex-col justify-center h-full px-3 mx-auto flex-center">
            <div class="relative flex items-center w-full pl-1 lg:max-w-68 sm:pr-2 sm:ml-0">
              <div class="container relative left-0 z-50 flex w-3/4 h-auto h-full">
                <div class="relative flex items-center w-full h-full lg:w-64 group">
                  <div
                      class="absolute z-50 flex items-center justify-center block w-auto h-10 p-3 pr-2 text-sm text-gray-500 uppercase cursor-pointer sm:hidden">
                    <svg fill="none" class="relative w-5 h-5" stroke-linecap="round" stroke-linejoin="round"
                         stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
                      <path d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z">
                      </path>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="relative flex gap-4 items-center justify-end w-1/4 p-1 ml-5 mr-4 sm:mr-0 sm:right-10">
                <div class="dropdown dropdown-hover">
                  <div tabindex="0" class="avatar flex justify-center w-28 m-1">
                    <span>{{localUserRef.name}}</span>
                  </div>
                  <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-32 p-2 shadow">
                    <li><a @click="logout()">注销登录</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </header>


        <div class="h-screen pt-2 pb-24 pl-2 pr-2 overflow-auto md:pt-0 md:pr-0 md:pl-0">
          <slot name="main"></slot>
        </div>

      </div>
    </div>
  </main>

</template>

<script setup>
import auth from "../utils/auth/index.js";
import {httpPost} from "../utils/http/http-helper.js";
import {notificationError} from "../utils/notification/index.js";

const route = useRoute()
const router = useRouter()

const localUserRef = ref({})

const activeIndex = computed(() => {
  return route.meta.index
})
const navigationRef = ref([])

if(process.client){
  const loginUser = auth.getLocalUser()
  if(null !== loginUser){
    localUserRef.value = loginUser
  }

  if(loginUser.role === '学生'){
    navigationRef.value = [
      {name: '公告', href: '/student/inbox', current: activeIndex.value === 'student-inbox', svgPath: 'M288 287.872V64H64v224l224-0.128z m112 672h224V736h-224v224z m-336 0h224V736H64v224z m0-336h224v-224H64v224z m336 0h224v-224h-224v224z m336-336H960V64h-224v223.872z m-112 0V64h-224v224l224-0.128zM960 623.872v-224h-224v224H960z m0 336V736h-224v224H960z'},
      {name: '视力报告', href: '/student/report', current: activeIndex.value === 'student-report', svgPath: 'M288 287.872V64H64v224l224-0.128z m112 672h224V736h-224v224z m-336 0h224V736H64v224z m0-336h224v-224H64v224z m336 0h224v-224h-224v224z m336-336H960V64h-224v223.872z m-112 0V64h-224v224l224-0.128zM960 623.872v-224h-224v224H960z m0 336V736h-224v224H960z'},
    ]
  }
  if(loginUser.role === '教师'){
    navigationRef.value = [
      {name: '用户', href: '/manage/user', current: activeIndex.value === 'manage-user', svgPath: 'M288 287.872V64H64v224l224-0.128z m112 672h224V736h-224v224z m-336 0h224V736H64v224z m0-336h224v-224H64v224z m336 0h224v-224h-224v224z m336-336H960V64h-224v223.872z m-112 0V64h-224v224l224-0.128zM960 623.872v-224h-224v224H960z m0 336V736h-224v224H960z'},
      {name: '公告', href: '/manage/gonggao', current: activeIndex.value === 'manage-gonggao', svgPath: 'M288 287.872V64H64v224l224-0.128z m112 672h224V736h-224v224z m-336 0h224V736H64v224z m0-336h224v-224H64v224z m336 0h224v-224h-224v224z m336-336H960V64h-224v223.872z m-112 0V64h-224v224l224-0.128zM960 623.872v-224h-224v224H960z m0 336V736h-224v224H960z'},
      {name: '视力报告', href: '/manage/baogao', current: activeIndex.value === 'manage-baogao', svgPath: 'M288 287.872V64H64v224l224-0.128z m112 672h224V736h-224v224z m-336 0h224V736H64v224z m0-336h224v-224H64v224z m336 0h224v-224h-224v224z m336-336H960V64h-224v223.872z m-112 0V64h-224v224l224-0.128zM960 623.872v-224h-224v224H960z m0 336V736h-224v224H960z'},
    ]
  }
  if(loginUser.role === '超级管理员'){
    navigationRef.value = [
      {name: '用户', href: '/manage/user', current: activeIndex.value === 'manage-user', svgPath: 'M288 287.872V64H64v224l224-0.128z m112 672h224V736h-224v224z m-336 0h224V736H64v224z m0-336h224v-224H64v224z m336 0h224v-224h-224v224z m336-336H960V64h-224v223.872z m-112 0V64h-224v224l224-0.128zM960 623.872v-224h-224v224H960z m0 336V736h-224v224H960z'},
      {name: '学校', href: '/manage/school', current: activeIndex.value === 'manage-school', svgPath: 'M288 287.872V64H64v224l224-0.128z m112 672h224V736h-224v224z m-336 0h224V736H64v224z m0-336h224v-224H64v224z m336 0h224v-224h-224v224z m336-336H960V64h-224v223.872z m-112 0V64h-224v224l224-0.128zM960 623.872v-224h-224v224H960z m0 336V736h-224v224H960z'},
      {name: '公告', href: '/manage/gonggao', current: activeIndex.value === 'manage-gonggao', svgPath: 'M288 287.872V64H64v224l224-0.128z m112 672h224V736h-224v224z m-336 0h224V736H64v224z m0-336h224v-224H64v224z m336 0h224v-224h-224v224z m336-336H960V64h-224v223.872z m-112 0V64h-224v224l224-0.128zM960 623.872v-224h-224v224H960z m0 336V736h-224v224H960z'},
      {name: '视力报告', href: '/manage/baogao', current: activeIndex.value === 'manage-baogao', svgPath: 'M288 287.872V64H64v224l224-0.128z m112 672h224V736h-224v224z m-336 0h224V736H64v224z m0-336h224v-224H64v224z m336 0h224v-224h-224v224z m336-336H960V64h-224v223.872z m-112 0V64h-224v224l224-0.128zM960 623.872v-224h-224v224H960z m0 336V736h-224v224H960z'},
    ]
  }
}

function logout(){
  httpPost('/api/auth/logout').then(resp => {
    if(!resp.success){
      notificationError(resp.msg)
      return
    }
    auth.clearAuthInfo()
    router.replace('/login')
  })
}
function toPage(href){
  router.push(href)
}

</script>